<template>
	<view class="container">
		<view class="list_item flex_box">
			<image :src="params.headPic ? params.headPic : upimg1" v-if="!id || isEdit" class="avatar" mode="aspectFill" @tap="chooseAvatar"></image>
			<image :src="params.headPic" class="avatar" mode="aspectFill" @tap="chooseAvatar" v-else></image>
		  <view class="flex1">
		    <view class="flex_box customer_info">
					<view class="customer_label">
						<text>姓名</text>
					</view>
					<view class="customer_con">
						<input type="text" class="ipt" v-model="params.teacherName" v-if="!id || isEdit">
						<text v-else>{{params.teacherName}}</text>
					</view>
				</view>
				<view class="flex_box customer_info">
					<view class="customer_label">
						<text>性别</text>
					</view>
					<view class="customer_con">
						<radio-group @change="radioChange" class="flex_box" v-if="!id || isEdit">
								<label class="radio_box" v-for="(item, index) in sexs" :key="item.value">
										<view>
												<radio :value="item.id" :checked="index === params.teacherSex" class="radio"/>{{item.name}}
										</view>
								</label>
							</radio-group>
							<text v-else>{{params.teacherSex==0?'男':'女'}}</text>
					</view>
				</view>
				<view class="flex_box customer_info">
					<view class="customer_label">
						<text>电话</text>
					</view>
					<view class="customer_con">
						<input type="text" class="ipt" v-model="params.teacherPhone" v-if="!id || isEdit">
						<text v-else>{{params.teacherPhone}}</text>
					</view>
				</view>
		  </view>
		</view>
		<view class="application">
			<view class="flex_box customer_info">
				<view class="customer_label">
					<text>宣传语</text>
				</view>
				<view class="flex1 customer_con">
					<input type="text" class="ipt" v-model="params.advertName" v-if="!id || isEdit">
					<text v-else>{{params.advertName}}</text>
				</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label" v-model="params.teacherName">
					<text>标签</text>
				</view>
				<view class="flex1 customer_con flex_box" v-if="!id || isEdit">
					<input type="text" class="ipt" v-model="params.teachStyle1">
					<input type="text" class="ipt" v-model="params.teachStyle2">
					<input type="text" class="ipt" v-model="params.teachStyle3">
				</view>
				<view class="flex1 customer_con flex_box" v-else>
					<view class="tag tag_green">{{params.teachStyle1}}</view>
					<view class="tag tag_organge">{{params.teachStyle2}}</view>
					<view class="tag tag_organge">{{params.teachStyle3}}</view>
				</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">
					<text>地址</text>
				</view>
				<view class="flex1 customer_con" @tap="chooseAddr" v-if="!id || isEdit">
					<text>{{params.teacherAddr || '请选择地址'}}</text>
				</view>
				<view class="flex1 customer_con"  v-else>
					<text>{{params.teacherAddr}}</text>
				</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">
					<text>服务中心</text>
				</view>
				<view class="flex1 customer_con">
					<input type="text" class="ipt" v-model="params.teachCenterAddr" v-if="!id || isEdit">
					<text v-else>{{params.teachCenterAddr}}</text>
				</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">
					<text>服务半径</text>
				</view>
				<view class="flex1 customer_con">
					<input type="text" class="ipt" v-model="params.teachScope" v-if="!id || isEdit">
					<text v-else>{{params.teachScope}}</text>
				</view>
			</view>
			<view class="flex_box customer_info">
				<view class="customer_label">
					<text>报名照片</text>
				</view>
			</view>
			<view class="flex_box_wrap">
				<view class="img_box" v-if="params.advertMp4">
					<image :src="params.advertMp4" class="img"></image>
					<image src="../../static/images/del.png" class="del_icon" @tap="delIcon" v-if="!id || isEdit"></image>
				</view>
				<view class="img_box" v-if="!id || isEdit">
					<image :src="upimg2" class="img" @tap="chooseImg"></image>
				</view>
			</view>
			<view class="flex_start customer_info">
				<view class="customer_label">
					<text>个人介绍</text>
				</view>
				<view class="flex1 desc">
					<textarea placeholder-style="color:#999" v-model="params.teacherRemark" class="textarea" placeholder="请输入个人介绍" v-if="!id || isEdit"/>
					<text v-else>{{params.teacherRemark}}</text>
				</view>
			</view>
		</view>
		<view class="btn_box flex_box">
			<view class="btn" @tap='edit' v-if="!isEdit">修改</view>
			<view class="btn cancel_btn flex1" @tap='cancel' v-if="isEdit">取消</view>
			<view class="btn flex1" @tap='submit' v-if="isEdit">提交</view>
		</view>
	</view>
</template>

<script>
	import {toast} from '@/common/js/public.js'
	import { pathToBase64 } from 'image-tools'
	export default {
		data() {
			return {
				upimg1:require('@/static/images/upimg1.png'),
				upimg2:require('@/static/images/upimg2.png'),
				params:{
					"advertName": "",
					"headPic": "",
					"teachCenterAddr": "",
					"teachScope": "",
					"teachStyle1": "",
					"teachStyle2": "",
					"teachStyle3": "",
					"teacherAddr": "",
					"teacherArea": "",
					"teacherCity": "",
					"teacherName": "",
					"teacherNo": "",
					"teacherPhone": "",
					"teacherProvince": "",
					"teacherRemark": "",
					"teacherSex": 0,
					"advertMp4":''
				},
				sexs:[
					{name:'男',id:'0'},
					{name:'女',id:'1'},
				],
				loading:false,
				id:'',
				isEdit:false
			}
		},
		onLoad(options) {
			// let info = {
			// 	teacherAppId: "wx08c19827d10b78fe",
			// 	teacherNo: "T2021090500006",
			// 	teacherOpenId: "oUEQCw93yZ5Zp4h4mZvGho22_UEU",
			// 	teacherUnionId: "",
			// }
			let info = uni.getStorageSync('teacher_userinfo')
			if (!info) {
				uni.navigateTo({
					url:'/pages/login/login?type=joinadd'
				})
				return
			}
			this.params.teacherNo = info.teacherNo
			this.queryTeacherDetail()
		},
		methods: {
			edit() {
				this.isEdit = true
			},
			cancel() {
				this.isEdit = false
				this.queryTeacherDetail()
			},
			submit() {
				var myreg=/^1[0-9]{10}$/
				if (!myreg.test(this.params.teacherPhone)) {
					toast('手机号格式不正确')
					return;
				}
				if (this.params.teacherName == '') {
					toast('姓名不能为空')
					return;
				}
				if (this.params.headPic == '') {
					toast('请选择头像')
					return;
				}
				if (this.loading) return
				this.loading = true
				uni.showLoading({
				  title: '提交中...'
				});
				this.$api.updateTeacherDetail(this.params).then(res=>{
					this.loading = false
					uni.hideLoading();
					if (res.code == 1) {
						toast('提交成功')
						this.queryTeacherDetail()
					} else {
						toast(res.msg)
					}
				})
			},
			queryTeacherDetail() {
				let params = {
					teacherNo:this.params.teacherNo
				}
				this.$api.queryTeacherDetail(params).then(res=>{
					if (res.code == 1) {
						if (res.data) {
							this.id = res.data.id
							console.log(this.id)
							for (let key in this.params) {
								this.params[key] = res.data[key]
							}
						}
					} else {
						toast(res.msg)
					}
				})
			},
			chooseAddr() {
				uni.chooseLocation({
				    success: (res) => {
				      console.log(res)
							this.params.teacherAddr = res.name
							uni.request({
								url: 'https://restapi.amap.com/v3/geocode/regeo', 
								data: {
									key: '1cba6c8f2418355638fd2b90cb27a137',
									location:res.longitude+','+res.latitude
								},
								success: (res) => {
									if (res.data.status == '1') {
										console.log(res)
										let info = res.data.regeocode.addressComponent
										this.params.teacherProvince = info.province
										this.params.teacherCity = info.city
										this.params.teacherArea = info.district
									}
								}
							});
				    }
				});
			},
			chooseAvatar() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						uni.showLoading({
						  title: '上传中...'
						});
						uni.uploadFile({
								url: this.baseUrl+'/api/api/file/aliYunUpload', //仅为示例，非真实的接口地址
								filePath: tempFilePaths[0],
								name: 'file',
								success: (uploadFileRes) => {
									this.params.headPic = JSON.parse(uploadFileRes.data).data.url
									uni.hideLoading();
								},
								fail() {
									toast('上传失败，请重试')
									uni.hideLoading();
								}
						});
						// let urlList = res.tempFilePaths
						// urlList.forEach(url=>{
						// 	pathToBase64(url).then(base64 => {
						// 		this.params.headPic = base64
						// 	}).catch(error => {
						// 		console.error(error)
						// 	})
						// })
					}
				});
			},
			delIcon() {
				this.params.advertMp4 = ''
			},
			chooseImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						uni.showLoading({
						  title: '上传中...'
						});
						let urlList = res.tempFilePaths
						uni.uploadFile({
								url: this.baseUrl+'/api/api/file/aliYunUpload', //仅为示例，非真实的接口地址
								filePath: urlList[0],
								name: 'file',
								success: (uploadFileRes) => {
									this.params.advertMp4 = JSON.parse(uploadFileRes.data).data.url
									uni.hideLoading();
								},
								fail() {
									toast('上传失败，请重试')
									uni.hideLoading();
								}
						});
						// urlList.forEach(url=>{
						// 	pathToBase64(url).then(base64 => {
						// 		this.params.advertMp4 = base64
						// 	}).catch(error => {
						// 		console.error(error)
						// 	})
						// })
					}
				});
			},
			radioChange(e) {
				this.params.teacherSex = e.detail.value
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.container{
		min-height: calc(100vh - 88rpx);
	  font-size: 26rpx;
	  color:#333;
		background-color: #fafafa;
		box-sizing: border-box;
		position: relative;
		padding-bottom: 120rpx;
	}
	.list_item{
		background-color: #fff;
		padding:20rpx 30rpx;
		border:none;
	}
	.customer_label{
		width: 110rpx;
		height: 40rpx;
		line-height: 40rpx;
		flex: 0 0 120rpx;
		text-align: justify;
		font-size: 0;
	}
	.customer_label text{
		font-size: 26rpx;
	}
	.customer_label::after{
		content: "";
		display: inline-block;
		width: 100%;  
	}
	/* .customer_con{
		height: 40rpx;
		line-height: 40rpx;
	} */
	.ipt{
		height: 50rpx;
		border:2rpx solid #eee;
		box-sizing: border-box;
		padding:0 10rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
	.radio_box{
		margin-right: 10rpx;
	}
	.radio{
		transform: scale(0.6);
		color:#34BE97;
	}
	.textarea{
		width: 100%;
		height: 100rpx;
		border:2rpx solid #eee;
		box-sizing: border-box;
		padding:0 10rpx;
		font-size: 26rpx;
		margin-right: 20rpx;
	}
	.application{
		margin-top: 20rpx;
		background-color: #fff;
		padding:20rpx 30rpx;
	}
	.customer_info{
		margin-bottom: 16rpx;
	}
	.img_box{
		width: 210rpx;
		height: 190rpx;
		border-radius: 10rpx;
		position: relative;
		margin:0 30rpx 30rpx 0;
	}
	.img_box:nth-child(3n){
		margin-right: 0;
	}
	.img{
		width: 210rpx;
		height: 190rpx;
		border-radius: 10rpx;
	}
	.del_icon{
		width: 24rpx;
		height: 26rpx;
		position: absolute;
		right:-20rpx;
		top:-20rpx;
		padding:10rpx;
	}
	.desc{
		line-height: 36rpx;
		font-size: 26rpx;
		color:#666;
	}
	.tag{
		height: 34rpx;
		line-height: 34rpx;
		padding:0 10rpx;
		font-size: 20rpx;
		margin:10rpx 10rpx 10rpx 0;
		border-radius: 10rpx;
	}
	.tag_organge{
	  background: #FDF1EF;
	  color:#EA7355;
	}
	.tag_green{
	  background: #EAF9F4;
	  color:#34BE97;
	}
	.btn_box{
		position: fixed;
		left: 0;
		bottom:0;
		width: 100%;
		padding:20rpx;
		background-color: #FAFAFA;
		box-sizing: border-box;
	}
	.btn{
		width: 500rpx;
		height: 70rpx;
		margin:0 auto;
		text-align: center;
		line-height: 70rpx;
		background-color: #34BE97;
		color:#fff;
		border-radius: 70rpx;
		font-size:26rpx;
		border:none;
	}
	.cancel_btn{
		background-color: #fff;
		color:#666;
		margin-right:20rpx;
		border: 2rpx solid #eee;
	}
</style>
